<template>
  <div id="homepage">
    <router-view></router-view>   
    <!--路由映射 它显示子组件的类容 如： 我 舍 圈-->
    <footer> 
        <mu-paper>
            <mu-bottom-nav :value="bottomNav" @change="handleChange">
                <mu-bottom-nav-item value="she" title="舍" icon="home"  />
                <mu-bottom-nav-item value="quan" title="圈" icon="remove_red_eye"/>
                <mu-bottom-nav-item value="myself" title="我" icon="person"/>
            </mu-bottom-nav>
        </mu-paper>
    </footer>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'

    export default {
        name: 'homepage', //组件的名字
        data() {
            return { //数据
                msg: 'test router2.0',
                //  bottomNav: 'she'
            }
        },
        methods: { //方法
            ...mapMutations(['setbottomNav']),
            handleChange(val) { //点击底部的舍我圈的变化
                this.setbottomNav(val)
                    //  this.bottomNav = val
                if (val == 'she') {
                    this.$router.push({
                        path: '/'
                    })
                } else if (val == 'quan') {
                    this.$router.push({
                        path: '/host'
                    })
                } else if (val == 'myself') {
                    this.$router.push({
                        path: '/wo'
                    })
                }
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['bottomNav']),
        },
        mounted: function() { //组件加载完成

        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件



        },
        components: { //加载子组件

        }
    }
</script>
<style scoped>
    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->